<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>确认订单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .container { max-width: 960px; margin: 0 auto; padding: 16px; }
    </style>
</head>
<body>
<div id="app" class="container">
    <el-page-header @back="go('/cart')" content="确认订单"></el-page-header>

    <el-card style="margin-top:12px;">
        <el-descriptions title="收货信息" :column="2">
            <el-descriptions-item label="收货人">张三</el-descriptions-item>
            <el-descriptions-item label="电话">138****8888</el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">北京市 朝阳区 XX 路 XX 号</el-descriptions-item>
        </el-descriptions>
    </el-card>

    <el-table :data="rows" style="width:100%; margin-top:12px;">
        <el-table-column prop="name" label="商品"></el-table-column>
        <el-table-column prop="qty" label="数量" width="120"></el-table-column>
        <el-table-column prop="price" label="单价" width="150">
            <template #default="{row}">¥{{row.price}}</template>
        </el-table-column>
        <el-table-column label="小计" width="160">
            <template #default="{row}">¥{{(row.price*row.qty).toFixed(2)}}</template>
        </el-table-column>
    </el-table>

    <div style="display:flex; justify-content:flex-end; margin-top:12px; gap:12px; align-items:center;">
        <div>应付金额：<el-text type="danger" tag="b">¥{{total.toFixed(2)}}</el-text></div>
        <el-button type="primary" @click="createOrder">提交订单</el-button>
    </div>
</div>

<script>
const { createApp, ref, onMounted, computed } = Vue
createApp({
    setup(){
        const rows = ref([])
        const total = computed(()=> rows.value.reduce((s,r)=> s + r.price * r.qty, 0))
        const go = (p)=>{ window.location.href = p }
        const createOrder = async ()=>{
            const payload = rows.value.map(r=> ({
                goodsId: r.id,
                goodsName: r.name,
                goodsCoverImg: '',
                sellingPrice: Math.round(Number(r.price||0)*100),
                goodsCount: r.qty
            }))
            const res = await fetch('/api/orders', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload) })
            if(res.ok){ ElementPlus.ElMessage.success('订单已创建'); go('/orders') } else { ElementPlus.ElMessage.error('创建失败') }
        }
        onMounted(async ()=>{
            const cart = JSON.parse(localStorage.getItem('cart') || '{}')
            const ids = Object.keys(cart)
            const list = []
            for(const id of ids){
                const res = await fetch('/api/products/' + id)
                const p = await res.json()
                list.push({ id: Number(id), name: p.name, price: Number(p.price||0), qty: Number(cart[id]||1) })
            }
            rows.value = list
        })
        return { rows, total, go, createOrder }
    }
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>


